/**
 * @description 根据 VNode 生成 DOM 元素。
 * @param {*} param0 
 * @returns 
 */
const render = ({ type, props = {} }) => {
  // 判断是否文本元素
  const isTextElement = !type;
  // 创建 document 元素标签
  const element = isTextElement ? document.createTextNode('') : document.createElement(type);

  // on-x 监听器
  const isListener = p => p.startsWith('on');
  // 判断是属性
  const isAttribute = p => !isListener(p) && p !== 'children';

  // 遍历 props
  Object.keys(props).forEach(p => {
    // 添加属性
    if (isAttribute(p)) element[p] = props[p];
    // 添加事件
    if (!isTextElement && isListener(p))
      element.addEventListener(p.toLocaleLowerCase().slice(2), props[p]);
  })

  // 遍历递归子节点
  if (!isTextElement && props.children && props.children.length)
    props.children.forEach(childE => render(childE, element))
  
  // 返回真实 DOM
  return element
}

const myElement = {
  type: 'button',
  props: {
    type: 'button',
    className: 'btn',
    onClick: () => alert('Clicked'),
    children: [{ props: { nodeValue: 'Click me' } }]
  }
};

console.log(render(myElement));